import React, { Component } from 'react';
import './flowChart.scss'
import { Modal } from 'antd';
import { LgButton } from 'lancoo-web-ui';
class FlowChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            start: 0,
            show: false,
            isModalOpen: false,
        }

    }
    openFlowChart = () => {
        this.setState({
            show: true,
        })
    }
    closeFlowChart = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.setState({
            show: false,
        })
    }
    showModal = () => {
        this.setState({
            isModalOpen: true,
        })
    };
    handleOk = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.setState({
            show: false,
            isModalOpen: false,
        })
    };
    handleCancel = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.setState({
            isModalOpen: false,
        })
    };

    render() {
        let {
            show,
            isModalOpen
        } = this.state
        return (
            <div className={show ? 'flow-chart show' : 'flow-chart'} onClick={this.openFlowChart} onMouseEnter={this.openFlowChart} onMouseLeave={this.closeFlowChart}>
                <div className={show ? 'show-title' : ''}> 公告栏管理流程</div>
                {
                    show ?
                        <>
                            {/* <i className='x-icon' onClick={this.closeFlowChart}></i> */}
                            <span className='show-span'>
                                让您一张图预览公告栏管理全流程
                            </span>
                            <div className='detail_btn' onClick={this.showModal}>了解一下</div>
                        </>
                        : ''
                }
                <Modal className='flow-chart-modal' title="公告栏管理全流程" visible={isModalOpen} width={1080}
                    footer={null} onCancel={this.handleCancel}>
                    <i className='circle-left'></i>
                    <i className='circle-right'></i>
                    <i className='circle-bottom'></i>
                    <i className='circle-middle'></i>
                    <div className='flow-modal-top'>
                        <span className='tip-title'>公告栏管理说明</span>
                        <div className='tip-item'>
                            <span>“公告中心”包含：公告栏管理和公告栏两大功能模块。</span>
                            <span>学校管理员可以通过“公告栏管理”设置各类公告类型及其相应的负责人/负责身份类型，并进行权限分配。</span>
                            <span>公告栏管理员可在“公告栏管理”发布及管理自身负责的公告，并可撤回、删除或置顶公告。</span>
                            <span>校园用户可在“公告栏”查看各类已发布的公告详情。</span>
                        </div>
                    </div>
                    <div className='flow-modal-bottom'>
                        <span className='tip-title'>公告栏应用流程</span>
                        <i className='flow-img'></i>
                        <div className='i-know-btn'>
                            <LgButton backgroundType='opacification' gradient radius type='info' onClick={this.handleOk}>我知道了</LgButton>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default FlowChart;